<template>
  <div class="home" style="height:calc(100vh - 64px)">
    <!-- 选择站点和时间 -->
    <Row type="flex" justify="start" align="middle" style="height:40px;">
      <i-col>
        <!-- <Form :model="selectedData" :label-width="100" inline>
          <FormItem label="选择站点：">
            <Select v-model="selectedData.station">
              <Option
                v-for="item in stationList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </!-->
      </i-col>
      <i-col class="mytabs">
        <Tabs v-model="selectedData.dateTime">
          <TabPane label="实时数据" name="today"></TabPane>
          <TabPane label="近7天" name="week"></TabPane>
          <TabPane label="近一月" name="month"></TabPane>
        </Tabs>
      </i-col>
    </Row>

    <Row type="flex" justify="start" :gutter="15">
      <!-- 左侧 显示便利店信息 -->
      <i-col :span="7">
        <left-layout :selectedData="selectedData"></left-layout>
      </i-col>
      <!-- 中间 显示总信息，财务室，卸油口数据-->
      <i-col :span="10" style="">
        <center-layout :selectedData="selectedData"></center-layout>
      </i-col>
      <!-- 右侧 显示加油区和卸油口数据-->
      <i-col :span="7">
        <div class="charts-border">
          <right-layout :selectedData="selectedData"></right-layout>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import constData from "@/util/constData2";

import LeftLayout from "./leftLayout";
import CenterLayout from "./centerLayout";
import RightLayout from "./rightLayout";

export default {
  name: "station-analysis",
  components: {
    LeftLayout,
    CenterLayout,
    RightLayout
  },
  data() {
    return {
      contentHeight: "",
      selectedData: {
        station: "xiwan",
        dateTime: "today"
      },
      stationList: constData.stationList
    };
  },
  created() {
    console.log('主页:',this.$route)
    if (this.$route.query.station) {
      let sta = this.stationList.find(ele => {
        console.log(ele)
        return ele.value === this.$route.query.station;
      });
      console.log('station:', sta)
      this.selectedData.station = sta.value;
      sessionStorage.setItem("station", sta.value);
    } else {
      this.selectedData.station = 'fengchengshilu';
      sessionStorage.setItem("station", 'fengchengshilu');
    }
    let sessionStation = sessionStorage.getItem("station")

    console.log('sessionStation:', sessionStation)
    if (sessionStation) {
      this.selectedData.station = sessionStation
    }
    // console.log('站点：', this.selectedData)
    // if (this.$route.params.station) {
    //   this.selectedData.station = this.$route.params.station.value;
    // }
  },
  mounted () {
    // if (this.$route.query.station) {
    //   let sta = this.stationList.find(ele => {
    //     console.log(ele)
    //     return ele.value === this.$route.query.station;
    //   });
    //   console.log('station:', sta)
    //   this.selectedData.station = sta.value;
    // }
  }
};
</script>

<style lang="less">
.mytabs {
  height: 6rem;
}
.mytabs .ivu-tabs .ivu-tabs-nav .ivu-tabs-tab-active {
  color: #fff !important;
}
.mytabs .ivu-tabs .ivu-tabs-tab {
  font-size: 1.4rem !important;
}
</style>
